<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>智能测算系统</title>
  <!-- 引入外部资源 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  
  <!-- 引入自定义样式 -->
  <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
  
  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36CFC9',
            accent: '#722ED1',
            success: '#52C41A',
            warning: '#FAAD14',
            danger: '#FF4D4F',
            neutral: {
              100: '#F5F7FA',
              200: '#E4E6EB',
              300: '#C9CDD4',
              400: '#86909C',
              500: '#4E5969',
              600: '#272E3B',
              700: '#1D2129',
            }
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
          boxShadow: {
            'card': '0 4px 20px 0 rgba(0, 0, 0, 0.05)',
            'card-hover': '0 10px 30px 0 rgba(0, 0, 0, 0.1)',
          }
        },
      }
    }
  </script>
</head>

<body class="font-inter bg-neutral-100 text-neutral-700 min-h-screen flex flex-col">
  <!-- 顶部导航栏 -->
  <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300" id="navbar">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between items-center h-16">
        <!-- 左侧Logo和标题 -->
        <div class="flex items-center space-x-3">
          <div class="bg-gradient-primary text-white p-2 rounded-lg">
            <i class="fa fa-calculator text-xl"></i>
          </div>
          <h1 class="text-xl font-bold text-neutral-700">智能测算系统</h1>
        </div>
        
        <!-- 主导航 -->
        <nav class="hidden md:flex items-center space-x-1">
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-primary border-b-2 border-primary" id="calculation-nav-link">测算管理</a>
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-neutral-500 hover:text-primary hover:bg-primary/5 transition-colors" id="database-nav-link">数据库管理</a>
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-neutral-500 hover:text-primary hover:bg-primary/5 transition-colors">历史记录</a>
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-neutral-500 hover:text-primary hover:bg-primary/5 transition-colors">系统设置</a>
        </nav>
        
        <!-- 右侧用户信息 -->
        <div class="flex items-center space-x-4">
          <button class="text-neutral-500 hover:text-primary transition-colors">
            <i class="fa fa-bell-o text-lg"></i>
          </button>
          <div class="flex items-center space-x-2 cursor-pointer group">
            <img src="https://picsum.photos/id/1005/200/200" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all">
            <span class="text-sm font-medium hidden md:inline-block">张经理</span>
            <i class="fa fa-angle-down text-neutral-400 group-hover:text-primary transition-colors"></i>
          </div>
        </div>
      </div>
    </div>
  </header>

  <!-- 主内容区 -->
  <main class="flex-1 container mx-auto px-4 sm:px-6 lg:px-8 py-6">
    <!-- 数据库管理模块 (默认隐藏) -->
    <div id="database-module" class="hidden">
      <!-- 页面标题和操作按钮 -->
      <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4">
        <div>
          <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-neutral-700">数据库管理</h2>
          <p class="text-neutral-400 mt-1">管理数据库连接、查询和数据导入导出</p>
        </div>
        <div class="flex gap-3">
          <button id="new-connection-btn" class="bg-primary hover:bg-primary/90 text-white px-5 py-2.5 rounded-lg font-medium transition-all shadow-md hover:shadow-lg flex items-center gap-2">
            <i class="fa fa-plus"></i>
            <span>新建连接</span>
          </button>
          <button class="border border-neutral-300 hover:bg-neutral-50 text-neutral-700 px-5 py-2.5 rounded-lg font-medium transition-all flex items-center gap-2" id="refresh-connections">
            <i class="fa fa-refresh"></i>
            <span>刷新</span>
          </button>
        </div>
      </div>

      <!-- 数据库连接管理 -->
      <div class="bg-white rounded-xl shadow-card p-6 mb-6">
        <div class="flex justify-between items-center mb-6">
          <h3 class="text-xl font-bold text-neutral-700">数据库连接</h3>
          <span class="bg-neutral-100 text-neutral-600 text-sm px-3 py-1 rounded-full">已保存连接</span>
        </div>
        
        <div class="overflow-x-auto">
          <table class="min-w-full divide-y divide-neutral-200">
            <thead class="bg-neutral-50">
              <tr>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider w-12">
                  <input type="checkbox" class="rounded border-neutral-300 text-primary focus:ring-primary">
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">连接名称</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">数据库类型</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">主机地址</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">端口</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">数据库名称</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">状态</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">操作</th>
              </tr>
            </thead>
            <tbody class="bg-white divide-y divide-neutral-200" id="connections-table-body">
              <!-- 数据库连接数据将通过JavaScript动态加载 -->
              <tr>
                <td colspan="8" class="px-6 py-10 text-center text-neutral-500">
                  <i class="fa fa-spinner fa-spin mr-2"></i> 加载数据库连接...
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 数据库查询工具 -->
      <div class="bg-white rounded-xl shadow-card p-6 mb-6">
        <div class="flex justify-between items-center mb-6">
          <h3 class="text-xl font-bold text-neutral-700">SQL查询工具</h3>
          <div class="flex items-center gap-3">
            <select id="db-connection-select" class="px-4 py-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all text-sm appearance-none bg-white">
              <option value="">选择数据库连接</option>
              <!-- 选项将通过JavaScript动态加载 -->
            </select>
            <button id="disconnect-db" class="border border-neutral-300 hover:bg-neutral-50 text-neutral-700 px-4 py-2 rounded-lg text-sm transition-colors hidden">
              <i class="fa fa-unplug mr-1"></i> 断开连接
            </button>
          </div>
        </div>
        
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <!-- SQL编辑器 -->
          <div class="lg:col-span-1">
            <div class="border border-neutral-200 rounded-lg overflow-hidden flex flex-col h-full">
              <div class="bg-neutral-50 px-4 py-2 border-b border-neutral-200 flex justify-between items-center">
                <div class="text-sm font-medium text-neutral-700">SQL编辑器</div>
                <div class="flex space-x-2">
                  <button id="format-sql" class="text-neutral-500 hover:text-primary text-xs p-1" title="格式化SQL">
                    <i class="fa fa-indent"></i>
                  </button>
                  <button id="clear-sql" class="text-neutral-500 hover:text-primary text-xs p-1" title="清空">
                    <i class="fa fa-trash-o"></i>
                  </button>
                  <button id="save-query" class="text-neutral-500 hover:text-primary text-xs p-1" title="保存查询">
                    <i class="fa fa-save"></i>
                  </button>
                </div>
              </div>
              <div class="flex-1">
                <textarea id="sql-editor" class="w-full h-full p-4 border-0 focus:outline-none resize-none font-mono text-sm" placeholder="输入SQL查询语句..."></textarea>
              </div>
              <div class="bg-neutral-50 px-4 py-3 border-t border-neutral-200 flex justify-between items-center">
                <div class="text-xs text-neutral-500" id="query-status">未选择数据库连接</div>
                <button id="run-query" class="bg-primary hover:bg-primary/90 text-white px-4 py-1.5 rounded-lg text-sm font-medium transition-all shadow-sm opacity-50 cursor-not-allowed">
                  <i class="fa fa-play mr-1"></i> 执行查询
                </button>
              </div>
            </div>
          </div>
          
          <!-- 查询结果 -->
          <div class="lg:col-span-2">
            <div class="border border-neutral-200 rounded-lg overflow-hidden flex flex-col h-full">
              <div class="bg-neutral-50 px-4 py-2 border-b border-neutral-200 flex justify-between items-center">
                <div class="text-sm font-medium text-neutral-700">查询结果</div>
                <div class="flex space-x-2">
                  <button id="export-result" class="text-neutral-500 hover:text-primary text-xs p-1 hidden" title="导出结果">
                    <i class="fa fa-download"></i> 导出
                  </button>
                  <button id="copy-result" class="text-neutral-500 hover:text-primary text-xs p-1 hidden" title="复制结果">
                    <i class="fa fa-copy"></i> 复制
                  </button>
                </div>
              </div>
              <div class="flex-1 overflow-auto" id="query-result-container">
                <div class="flex items-center justify-center h-full text-neutral-400">
                  <div class="text-center p-8">
                    <i class="fa fa-database text-4xl mb-3"></i>
                    <p>选择数据库连接并执行SQL查询以查看结果</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 查询历史 -->
      <div class="bg-white rounded-xl shadow-card p-6">
        <div class="flex justify-between items-center mb-6">
          <h3 class="text-xl font-bold text-neutral-700">查询历史</h3>
          <button id="clear-history" class="text-danger hover:text-danger/80 text-sm font-medium transition-colors">
            <i class="fa fa-trash-o mr-1"></i> 清空历史
          </button>
        </div>
        
        <div class="space-y-3 max-h-[400px] overflow-y-auto scrollbar-hide pr-2" id="query-history-container">
          <!-- 查询历史将通过JavaScript动态加载 -->
          <div class="text-center py-10 text-neutral-500">
            <i class="fa fa-spinner fa-spin mr-2"></i> 加载查询历史...
          </div>
        </div>
      </div>
    </div>

    <!-- 测算管理模块 (默认显示) -->
    <div id="calculation-module">
      <!-- 页面标题和操作按钮 -->
      <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4">
        <div>
          <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-neutral-700">测算管理</h2>
          <p class="text-neutral-400 mt-1">创建和管理测算场景、设置参数并查看结果</p>
        </div>
        <button id="new-calculation-btn" class="bg-primary hover:bg-primary/90 text-white px-5 py-2.5 rounded-lg font-medium transition-all shadow-md hover:shadow-lg flex items-center gap-2">
          <i class="fa fa-plus"></i>
          <span>新建测算</span>
        </button>
      </div>

      <!-- 测算流程步骤导航 -->
      <div class="bg-white rounded-xl shadow-card p-4 mb-6">
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
          <div class="text-lg font-semibold text-neutral-700">当前测算: <span id="current-scenario" class="text-primary">未选择测算场景</span></div>
          
          <div class="w-full md:w-auto">
            <ol class="flex flex-wrap justify-between items-center w-full text-sm font-medium text-center text-neutral-500">
              <li class="flex flex-col items-center" data-step="1">
                <div class="flex items-center justify-center w-10 h-10 mb-2 rounded-full bg-primary text-white">
                  <i class="fa fa-file-text-o"></i>
                </div>
                <span>创建场景</span>
              </li>
              <li class="hidden md:block w-full max-w-[60px] h-1 mx-2 my-4 bg-neutral-200 relative">
                <div class="absolute top-0 left-0 h-full bg-primary transition-all duration-500" style="width: 0%" data-connector="1-2"></div>
              </li>
              <li class="flex flex-col items-center" data-step="2">
                <div class="flex items-center justify-center w-10 h-10 mb-2 rounded-full bg-neutral-200 text-neutral-500 transition-all">
                  <i class="fa fa-sliders"></i>
                </div>
                <span>假设条件</span>
              </li>
              <li class="hidden md:block w-full max-w-[60px] h-1 mx-2 my-4 bg-neutral-200 relative">
                <div class="absolute top-0 left-0 h-full bg-primary transition-all duration-500" style="width: 0%" data-connector="2-3"></div>
              </li>
              <li class="flex flex-col items-center" data-step="3">
                <div class="flex items-center justify-center w-10 h-10 mb-2 rounded-full bg-neutral-200 text-neutral-500 transition-all">
                  <i class="fa fa-upload"></i>
                </div>
                <span>数据导入</span>
              </li>
              <li class="hidden md:block w-full max-w-[60px] h-1 mx-2 my-4 bg-neutral-200 relative">
                <div class="absolute top-0 left-0 h-full bg-primary transition-all duration-500" style="width: 0%" data-connector="3-4"></div>
              </li>
              <li class="flex flex-col items-center" data-step="4">
                <div class="flex items-center justify-center w-10 h-10 mb-2 rounded-full bg-neutral-200 text-neutral-500 transition-all">
                  <i class="fa fa-table"></i>
                </div>
                <span>数据准备</span>
              </li>
              <li class="hidden md:block w-full max-w-[60px] h-1 mx-2 my-4 bg-neutral-200 relative">
                <div class="absolute top-0 left-0 h-full bg-primary transition-all duration-500" style="width: 0%" data-connector="4-5"></div>
              </li>
              <li class="flex flex-col items-center" data-step="5">
                <div class="flex items-center justify-center w-10 h-10 mb-2 rounded-full bg-neutral-200 text-neutral-500 transition-all">
                  <i class="fa fa-play"></i>
                </div>
                <span>开始测算</span>
              </li>
              <li class="hidden md:block w-full max-w-[60px] h-1 mx-2 my-4 bg-neutral-200 relative">
                <div class="absolute top-0 left-0 h-full bg-primary transition-all duration-500" style="width: 0%" data-connector="5-6"></div>
              </li>
              <li class="flex flex-col items-center" data-step="6">
                <div class="flex items-center justify-center w-10 h-10 mb-2 rounded-full bg-neutral-200 text-neutral-500 transition-all">
                  <i class="fa fa-bar-chart"></i>
                </div>
                <span>结果查看</span>
              </li>
            </ol>
          </div>
        </div>
      </div>

      <!-- 步骤内容区域 -->
      <div class="space-y-6">
        <!-- 1. 创建测算场景 -->
        <div id="step-1" class="bg-white rounded-xl shadow-card p-6 transition-all duration-500">
          <div class="flex justify-between items-center mb-6">
            <h3 class="text-xl font-bold text-neutral-700">创建测算场景</h3>
            <span class="bg-primary/10 text-primary text-sm px-3 py-1 rounded-full">步骤 1/6</span>
          </div>
          
          <div class="grid md:grid-cols-3 gap-6">
            <!-- 场景列表 -->
            <div class="md:col-span-2">
              <div class="flex justify-between items-center mb-4">
                <h4 class="font-medium text-neutral-600">现有测算场景</h4>
                <div class="relative">
                  <input type="text" placeholder="搜索场景..." class="pl-9 pr-4 py-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all text-sm w-full md:w-64" id="scenario-search">
                  <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400"></i>
                </div>
              </div>
              
              <div class="space-y-3 max-h-[400px] overflow-y-auto scrollbar-hide pr-2" id="scenarios-list">
                <!-- 场景列表将通过JavaScript动态加载 -->
                <div class="text-center py-10 text-neutral-500">
                  <i class="fa fa-spinner fa-spin mr-2"></i> 加载测算场景...
                </div>
              </div>
            </div>
            
            <!-- 新建/编辑场景表单 -->
            <div class="bg-neutral-50 rounded-xl p-5">
              <h4 class="font-medium text-neutral-600 mb-4">创建新场景</h4>
              <form id="scenario-form">
                <input type="hidden" id="scenario-id">
                <div class="space-y-4">
                  <div>
                    <label for="scenario-name" class="block text-sm font-medium text-neutral-600 mb-1">场景名称 <span class="text-danger">*</span></label>
                    <input type="text" id="scenario-name" class="w-full px-4 py-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all" placeholder="输入场景名称">
                  </div>
                  
                  <div>
                    <label for="scenario-desc" class="block text-sm font-medium text-neutral-600 mb-1">场景描述</label>
                    <textarea id="scenario-desc" rows="3" class="w-full px-4 py-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all" placeholder="输入场景描述信息"></textarea>
                  </div>
                  
                  <div>
                    <label for="scenario-type" class="block text-sm font-medium text-neutral-600 mb-1">测算类型 <span class="text-danger">*</span></label>
                    <select id="scenario-type" class="w-full px-4 py-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all appearance-none bg-white">
                      <option value="">请选择测算类型</option>
                      <option value="sales">销售预测</option>
                      <option value="investment">投资回报</option>
                      <option value="market">市场分析</option>
                      <option value="cost">成本测算</option>
                      <option value="other">其他类型</option>
                    </select>
                  </div>
                  
                  <!-- 关联数据库选项 -->
                  <div>
                    <label for="scenario-db" class="block text-sm font-medium text-neutral-600 mb-1">关联数据库</label>
                    <select id="scenario-db" class="w-full px-4 py-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all appearance-none bg-white">
                      <option value="">不关联数据库</option>
                      <!-- 选项将通过JavaScript动态加载 -->
                    </select>
                  </div>
                  
                  <div class="pt-2">
                    <button type="button" id="save-scenario" class="w-full bg-primary hover:bg-primary/90 text-white py-2.5 rounded-lg font-medium transition-all shadow-md hover:shadow-lg">
                      保存场景
                    </button>
                  </div>
                </div>
              </form>
            </div>
          </div>
          
          <div class="mt-6 flex justify-end">
            <button id="to-step-2" class="bg-primary hover:bg-primary/90 text-white px-6 py-2.5 rounded-lg font-medium transition-all shadow-md hover:shadow-lg opacity-50 cursor-not-allowed">
              下一步 <i class="fa fa-arrow-right ml-1"></i>
            </button>
          </div>
        </div>
        
        <!-- 2. 测算假设条件 -->
        <div id="step-2" class="bg-white rounded-xl shadow-card p-6 transition-all duration-500 hidden">
          <div class="flex justify-between items-center mb-6">
            <h3 class="text-xl font-bold text-neutral-700">测算假设条件</h3>
            <span class="bg-primary/10 text-primary text-sm px-3 py-1 rounded-full">步骤 2/6</span>
          </div>
          
          <div class="mb-6">
            <p class="text-neutral-500 mb-4">为<span id="scenario-name-display" class="font-medium text-primary">未选择测算场景</span>设置测算假设条件和参数</p>
            
            <div class="space-y-6">
              <!-- 基础参数 -->
              <div class="border border-neutral-200 rounded-xl overflow-hidden">
                <div class="bg-neutral-50 px-5 py-3 border-b border-neutral-200 flex justify-between items-center cursor-pointer accordion-header">
                  <h4 class="font-medium text-neutral-700">基础参数</h4>
                  <i class="fa fa-angle-down text-neutral-400 transition-transform duration-300"></i>
                </div>
                <div class="p-5 accordion-content">
                  <div class="grid md:grid-cols-2 gap-6">
                    <div>
                      <label for="time-period" class="block text-sm font-medium text-neutral-600 mb-1">测算时间段 <span class="text-danger">*</span></label>
                      <div class="flex space-x-3">
                        <input type="date" id="time-start" class="flex-1 px-4 py-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                        <span class="flex items-center text-neutral-400">至</span>
                        <input type="date" id="time-end" class="flex-1 px-4 py-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                      </div>
                    </div>
                    
                    <div>
                      <label for="currency" class="block text-sm font-medium text-neutral-600 mb-1">货币单位 <span class="text-danger">*</span></label>
                      <select id="currency" class="w-full px-4 py-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all appearance-none bg-white">
                        <option value="CNY">人民币 (¥)</option>
                        <option value="USD">美元 ($)</option>
                        <option value="EUR">欧元 (€)</option>
                        <option value="GBP">英镑 (£)</option>
                      </select>
                    </div>
                    
                    <div>
                      <label for="tax-rate" class="block text-sm font-medium text-neutral-600 mb-1">税率 (%)</label>
                      <input type="number" id="tax-rate" min="0" max="100" step="0.01" class="w-full px-4 py-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all" placeholder="输入税率">
                    </div>
                    
                    <div>
                      <label for="inflation-rate" class="block text-sm font-medium text-neutral-600 mb-1">通胀率 (%)</label>
                      <input type="number" id="inflation-rate" min="0" max="100" step="0.01" class="w-full px-4 py-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all" placeholder="输入通胀率">
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- 业务参数 -->
              <div class="border border-neutral-200 rounded-xl overflow-hidden">
                <div class="bg-neutral-50 px-5 py-3 border-b border-neutral-200 flex justify-between items-center cursor-pointer accordion-header">
                  <h4 class="font-medium text-neutral-700">业务参数</h4>
                  <i class="fa fa-angle-down text-neutral-400 transition-transform duration-300"></i>
                </div>
                <div class="p-5 accordion-content hidden">
                  <div class="grid md:grid-cols-2 gap-6">
                    <div>
                      <label for="growth-rate" class="block text-sm font-medium text-neutral-600 mb-1">预计增长率 (%)</label>
                      <input type="number" id="growth-rate" step="0.01" class="w-full px-4 py-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all" placeholder="输入预计增长率">
                    </div>
                    
                    <div>
                      <label for="cost-rate" class="block text-sm font-medium text-neutral-600 mb-1">成本占比 (%)</label>
                      <input type="number" id="cost-rate" min="0" max="100" step="0.01" class="w-full px-4 py-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all" placeholder="输入成本占比">
                    </div>
                    
                    <div>
                      <label for="investment-amount" class="block text-sm font-medium text-neutral-600 mb-1">初始投资金额</label>
                      <input type="number" id="investment-amount" min="0" step="0.01" class="w-full px-4 py-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all" placeholder="输入初始投资金额">
                    </div>
                    
                    <div>
                      <label for="discount-rate" class="block text-sm font-medium text-neutral-600 mb-1">折现率 (%)</label>
                      <input type="number" id="discount-rate" min="0" max="100" step="0.01" class="w-full px-4 py-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all" placeholder="输入折现率">
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- 自定义参数 -->
              <div class="border border-neutral-200 rounded-xl overflow-hidden">
                <div class="bg-neutral-50 px-5 py-3 border-b border-neutral-200 flex justify-between items-center cursor-pointer accordion-header">
                  <h4 class="font-medium text-neutral-700">自定义参数</h4>
                  <button id="add-param" class="text-primary hover:text-primary/80 text-sm font-medium transition-colors">
                    <i class="fa fa-plus-circle mr-1"></i> 添加参数
                  </button>
                </div>
                <div id="custom-params-container" class="p-5">
                  <div class="text-neutral-400 text-center py-6">
                    <i class="fa fa-info-circle text-2xl mb-2"></i>
                    <p>暂无自定义参数，点击"添加参数"按钮创建</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="mt-6 flex justify-between">
            <button id="back-to-step-1" class="border border-neutral-300 hover:bg-neutral-50 text-neutral-700 px-6 py-2.5 rounded-lg font-medium transition-all">
              <i class="fa fa-arrow-left mr-1"></i> 上一步
            </button>
            <button id="to-step-3" class="bg-primary hover:bg-primary/90 text-white px-6 py-2.5 rounded-lg font-medium transition-all shadow-md hover:shadow-lg">
              下一步 <i class="fa fa-arrow-right ml-1"></i>
            </button>
          </div>
        </div>
        
        <!-- 3. 数据导入 -->
        <div id="step-3" class="bg-white rounded-xl shadow-card p-6 transition-all duration-500 hidden">
          <div class="flex justify-between items-center mb-6">
            <h3 class="text-xl font-bold text-neutral-700">数据导入</h3>
            <span class="bg-primary/10 text-primary text-sm px-3 py-1 rounded-full">步骤 3/6</span>
          </div>
          
          <div class="mb-6">
            <p class="text-neutral-500 mb-6">导入测算所需的数据，支持多种格式和导入方式</p>
            
            <div class="grid md:grid-cols-2 gap-6">
              <!-- 上传文件 -->
              <div class="border-2 border-dashed border-neutral-300 rounded-xl p-8 text-center hover:border-primary transition-colors cursor-pointer group" id="file-upload-area">
                <div class="mb-4 text-neutral-400 group-hover:text-primary transition-colors">
                  <i class="fa fa-cloud-upload text-4xl"></i>
                </div>
                <h4 class="font-medium text-neutral-700 mb-2">上传数据文件</h4>
                <p class="text-sm text-neutral-500 mb-4">支持 Excel, CSV, JSON 格式文件</p>
                <button id="select-file-btn" class="bg-white border border-primary text-primary hover:bg-primary/5 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                  选择文件
                </button>
                <input type="file" id="file-upload" class="hidden" accept=".xlsx,.xls,.csv,.json">
              </div>
              <div id="status" class="mt-4 text-sm text-neutral-600"></div>
              <script>
                document.getElementById('select-file-btn').addEventListener('click', function() {
                  document.getElementById('file-upload').click();
                });
                
                document.getElementById('file-upload').addEventListener('change', function(e) {
                  const file = e.target.files[0];
                  const statusDiv = document.getElementById('status');
                  
                  if (!file) {
                    statusDiv.textContent = '请选择文件。';
                    return;
                  }
                  
                  const formData = new FormData();
                  formData.append('file', file);
                  
                  statusDiv.textContent = '上传中...';
                  
                  fetch('/upload', {
                    method: 'POST',
                    body: formData
                  })
                  .then(response => response.json())
                  .then(data => {
                    if (data.error) {
                      statusDiv.textContent = `上传失败: ${data.error}`;
                    } else {
                      statusDiv.textContent = `上传成功: ${data.filename}`;
                      // 可以在这里添加更多处理逻辑，例如显示导入的数据
                    }
                  })
                  .catch(error => {
                    statusDiv.textContent = `上传失败: ${error.message}`;
                  });
                });
              </script>
              
              <!-- 其他导入方式 -->
              <div class="space-y-4">
                <div class="border border-neutral-200 rounded-xl p-5 hover:border-primary hover:shadow-sm transition-all cursor-pointer" id="db-import-option">
                  <div class="flex items-center">
                    <div class="w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center text-accent mr-4">
                      <i class="fa fa-database"></i>
                    </div>
                    <div>
                      <h4 class="font-medium text-neutral-700">数据库连接</h4>
                      <p class="text-sm text-neutral-500 mt-0.5">从数据库直接导入数据</p>
                    </div>
                  </div>
                </div>
                
                <div class="border border-neutral-200 rounded-xl p-5 hover:border-primary hover:shadow-sm transition-all cursor-pointer" id="manual-input-area">
                  <div class="flex items-center">
                    <div class="w-10 h-10 rounded-full bg-secondary/10 flex items-center justify-center text-secondary mr-4">
                      <i class="fa fa-table"></i>
                    </div>
                    <div>
                      <h4 class="font-medium text-neutral-700">手动输入数据</h4>
                      <p class="text-sm text-neutral-500 mt-0.5">直接在表格中输入数据</p>
                    </div>
                  </div>
                </div>
                <script>
                  document.getElementById('manual-input-area').addEventListener('click', function() {
                    // 触发手动输入数据功能
                    console.log('手动输入数据区域被点击');
                  });
                </script>
                
                <div class="border border-neutral-200 rounded-xl p-5 hover:border-primary hover:shadow-sm transition-all cursor-pointer">
                  <div class="flex items-center">
                    <div class="w-10 h-10 rounded-full bg-warning/10 flex items-center justify-center text-warning mr-4">
                      <i class="fa fa-history"></i>
                    </div>
                    <div>
                      <h4 class="font-medium text-neutral-700">历史数据复用</h4>
                      <p class="text-sm text-neutral-500 mt-0.5">使用之前测算的数据</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 导入文件列表 -->
            <div id="uploaded-files" class="mt-8 hidden">
              <h4 class="font-medium text-neutral-700 mb-4">已上传文件</h4>
              <div class="space-y-3" id="uploaded-files-list">
                <!-- 上传的文件将在这里显示 -->
              </div>
            </div>
          </div>
          
          <div class="mt-6 flex justify-between">
            <button id="back-to-step-2" class="border border-neutral-300 hover:bg-neutral-50 text-neutral-700 px-6 py-2.5 rounded-lg font-medium transition-all">
              <i class="fa fa-arrow-left mr-1"></i> 上一步
            </button>
            <button id="to-step-4" class="bg-primary hover:bg-primary/90 text-white px-6 py-2.5 rounded-lg font-medium transition-all shadow-md hover:shadow-lg">
              下一步 <i class="fa fa-arrow-right ml-1"></i>
            </button>
          </div>
        </div>
        
        <!-- 其他步骤内容省略... -->
      </div>
    </div>
  </main>

  <!-- 数据库连接模态框 -->
  <div id="db-connection-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
      <div class="p-6 border-b border-neutral-200">
        <div class="flex justify-between items-center">
          <h3 class="text-xl font-bold text-neutral-800">新建数据库连接</h3>
          <button id="close-db-modal" class="text-neutral-500 hover:text-neutral-700">
            <i class="fa fa-times"></i>
          </button>
        </div>
      </div>
      <div class="p-6">
        <form id="db-connection-form">
          <input type="hidden" id="connection-id" name="connection-id" value="">
          
          <div class="mb-4">
            <label for="connection-name" class="block text-sm font-medium text-neutral-700 mb-1">连接名称</label>
            <input type="text" id="connection-name" name="connection-name" class="w-full px-4 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="输入连接名称" required>
          </div>
          
          <div class="mb-4">
            <label for="db-type" class="block text-sm font-medium text-neutral-700 mb-1">数据库类型</label>
            <select id="db-type" name="db-type" class="w-full px-4 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" required>
              <option value="">选择数据库类型</option>
              <option value="mysql">MySQL</option>
              <option value="postgresql">PostgreSQL</option>
              <option value="sqlserver">SQL Server</option>
              <option value="oracle">Oracle</option>
              <option value="sqlite">SQLite</option>
            </select>
          </div>
          
          <div class="grid grid-cols-2 gap-4 mb-4">
            <div>
              <label for="db-host" class="block text-sm font-medium text-neutral-700 mb-1">主机地址</label>
              <input type="text" id="db-host" name="db-host" class="w-full px-4 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="localhost" required>
            </div>
            <div>
              <label for="db-port" class="block text-sm font-medium text-neutral-700 mb-1">端口</label>
              <input type="text" id="db-port" name="db-port" class="w-full px-4 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="3306">
            </div>
          </div>
          
          <div class="mb-4">
            <label for="db-name" class="block text-sm font-medium text-neutral-700 mb-1">数据库名称</label>
            <input type="text" id="db-name" name="db-name" class="w-full px-4 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="输入数据库名称" required>
          </div>
          
          <div class="grid grid-cols-2 gap-4 mb-6">
            <div>
              <label for="db-username" class="block text-sm font-medium text-neutral-700 mb-1">用户名</label>
              <input type="text" id="db-username" name="db-username" class="w-full px-4 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="输入用户名" required>
            </div>
            <div>
              <label for="db-password" class="block text-sm font-medium text-neutral-700 mb-1">密码</label>
              <input type="password" id="db-password" name="db-password" class="w-full px-4 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="输入密码">
            </div>
          </div>
          
          <div class="flex justify-end space-x-3">
            <button type="button" id="test-connection-btn" class="px-5 py-2.5 bg-white border border-neutral-300 text-neutral-700 rounded-lg hover:bg-neutral-50 font-medium transition-all">
              测试连接
            </button>
            <button type="submit" class="px-5 py-2.5 bg-primary text-white rounded-lg hover:bg-primary/90 font-medium transition-all">
              保存连接
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- 页脚 -->
  <footer class="bg-white border-t border-neutral-200 py-6 mt-10">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex flex-col md:flex-row justify-between items-center">
        <div class="text-neutral-500 text-sm mb-4 md:mb-0">
          &copy; 2023 智能测算系统 - 版权所有
        </div>
        <div class="flex space-x-6">
          <a href="#" class="text-neutral-500 hover:text-primary text-sm transition-colors">使用帮助</a>
          <a href="#" class="text-neutral-500 hover:text-primary text-sm transition-colors">隐私政策</a>
          <a href="#" class="text-neutral-500 hover:text-primary text-sm transition-colors">联系我们</a>
        </div>
      </div>
    </div>
  </footer>

  <!-- 引入JavaScript -->
  <script src="/static/js/main.js"></script>
  <script>
    // 点击选择文件按钮触发隐藏的文件输入框
    document.getElementById('select-file-btn').addEventListener('click', function() {
      document.getElementById('file-upload').click();
    });
    
    // 点击整个上传区域也可以触发文件选择
    document.getElementById('file-upload-area').addEventListener('click', function(e) {
      document.getElementById('file-upload').click();
    });
    
    document.getElementById('file-upload').addEventListener('change', function(e) {
      const file = e.target.files[0];
      if (file) {
        const formData = new FormData();
        formData.append('file', file);

        // 显示上传状态
        const fileUploadArea = document.getElementById('file-upload-area');
        const originalContent = fileUploadArea.innerHTML;
        
        // 更改上传区域显示为上传中状态
        fileUploadArea.innerHTML = `
          <div class="flex flex-col items-center justify-center h-full">
            <div class="mb-4 text-primary">
              <i class="fa fa-spinner fa-spin text-4xl"></i>
            </div>
            <h4 class="font-medium text-neutral-700 mb-2">正在上传...</h4>
            <p class="text-sm text-neutral-500 mb-4">${file.name}</p>
            <div class="w-full bg-neutral-200 rounded-full h-2.5">
              <div id="upload-progress" class="bg-primary h-2.5 rounded-full" style="width: 0%"></div>
            </div>
          </div>
        `;
        
        const progressFill = document.getElementById('upload-progress');

        fetch('/upload', {
          method: 'POST',
          body: formData
        })
        .then(response => {
          if (!response.ok) {
            return response.json().then(err => { throw err; });
          }
          return response.json();
        })
        .then(data => {
          // 更新进度条到100%
          progressFill.style.width = '100%';
          
          // 显示成功状态
          setTimeout(() => {
            fileUploadArea.innerHTML = `
              <div class="flex flex-col items-center justify-center h-full">
                <div class="mb-4 text-success">
                  <i class="fa fa-check-circle text-4xl"></i>
        }).catch(error => {
          // 显示错误状态
          fileUploadArea.innerHTML = `
            <div class="flex flex-col items-center justify-center h-full">
              <div class="mb-4 text-danger">
                <i class="fa fa-times-circle text-4xl"></i>
              </div>
              <h4 class="font-medium text-neutral-700 mb-2">上传失败</h4>
              <p class="text-sm text-neutral-500 mb-4">${error.error || '未知错误'}</p>
              <button id="retry-upload-btn" class="bg-white border border-primary text-primary hover:bg-primary/5 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                重试
              </button>
            </div>
          
          
          // 重试按钮逻辑
          document.getElementById('retry-upload-btn').addEventListener('click', function() {
            fileUploadArea.innerHTML = originalContent;
            document.getElementById('file-upload').click();
          });
        });
                </div>
                <h4 class="font-medium text-neutral-700 mb-2">上传成功</h4>
                <p class="text-sm text-neutral-500 mb-4">${file.name}</p>
                <p class="text-sm text-success">共导入 ${data.data.length} 条记录</p>
              </div>
            `;
            
            // 显示通知
            showNotification(`文件上传成功: ${file.name}，共导入 ${data.data.length} 条记录`, 'success');
            
            // 3秒后恢复原始状态
            setTimeout(() => {
              fileUploadArea.innerHTML = originalContent;
            }, 3000);
          }, 1000);
        })
        .catch(error => {
          // 显示错误状态
          fileUploadArea.innerHTML = `
            <div class="flex flex-col items-center justify-center h-full">
              <div class="mb-4 text-danger">
                <i class="fa fa-exclamation-circle text-4xl"></i>
              </div>
              <h4 class="font-medium text-neutral-700 mb-2">上传失败</h4>
              <p class="text-sm text-danger mb-4">请重试</p>
              <button id="retry-upload-btn" class="bg-white border border-primary text-primary hover:bg-primary/5 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                重新上传
              </button>
            </div>
          `;
          
          // 添加重试按钮事件
          document.getElementById('retry-upload-btn').addEventListener('click', function() {
            fileUploadArea.innerHTML = originalContent;
            document.getElementById('file-upload').click();
          });
          
          // 显示错误通知
          showNotification('文件上传失败，请重试', 'error');
          console.error('Error:', error);
        });
      }
    });
  </script>

  <!-- 手动输入数据模态框 -->
  <div id="manual-input-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-4xl max-h-[90vh] overflow-y-auto">
      <div class="p-6 border-b border-neutral-200">
        <div class="flex justify-between items-center">
          <h3 class="text-xl font-semibold text-neutral-800">手动输入数据</h3>
          <button id="close-manual-input-modal" class="text-neutral-500 hover:text-neutral-700">
            <i class="fa fa-times"></i>
          </button>
        </div>
      </div>
      <div class="p-6">
        <div class="mb-4">
          <p class="text-neutral-600 mb-2">请在下方表格中输入数据，第一行为列名，可以添加或删除行和列</p>
          <div class="flex space-x-2 mb-4">
            <button id="add-row-btn" class="px-3 py-1 bg-primary text-white rounded hover:bg-primary-dark">
              <i class="fa fa-plus mr-1"></i> 添加行
            </button>
            <button id="add-column-btn" class="px-3 py-1 bg-primary text-white rounded hover:bg-primary-dark">
              <i class="fa fa-plus mr-1"></i> 添加列
            </button>
            <button id="delete-row-btn" class="px-3 py-1 bg-red-500 text-white rounded hover:bg-red-600">
              <i class="fa fa-minus mr-1"></i> 删除行
            </button>
            <button id="delete-column-btn" class="px-3 py-1 bg-red-500 text-white rounded hover:bg-red-600">
              <i class="fa fa-minus mr-1"></i> 删除列
            </button>
          </div>
        </div>
        <div class="overflow-x-auto">
          <table id="manual-input-table" class="min-w-full border border-neutral-200">
            <thead>
              <tr>
                <th class="border border-neutral-200 px-4 py-2 bg-neutral-50">#</th>
                <th class="border border-neutral-200 px-4 py-2 bg-neutral-50">
                  <input type="text" class="w-full px-2 py-1 border border-neutral-300 rounded" placeholder="列名1" value="列名1">
                </th>
                <th class="border border-neutral-200 px-4 py-2 bg-neutral-50">
                  <input type="text" class="w-full px-2 py-1 border border-neutral-300 rounded" placeholder="列名2" value="列名2">
                </th>
                <th class="border border-neutral-200 px-4 py-2 bg-neutral-50">
                  <input type="text" class="w-full px-2 py-1 border border-neutral-300 rounded" placeholder="列名3" value="列名3">
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="border border-neutral-200 px-4 py-2 text-center">1</td>
                <td class="border border-neutral-200 px-4 py-2">
                  <input type="text" class="w-full px-2 py-1 border border-neutral-300 rounded" placeholder="数据">
                </td>
                <td class="border border-neutral-200 px-4 py-2">
                  <input type="text" class="w-full px-2 py-1 border border-neutral-300 rounded" placeholder="数据">
                </td>
                <td class="border border-neutral-200 px-4 py-2">
                  <input type="text" class="w-full px-2 py-1 border border-neutral-300 rounded" placeholder="数据">
                </td>
              </tr>
              <tr>
                <td class="border border-neutral-200 px-4 py-2 text-center">2</td>
                <td class="border border-neutral-200 px-4 py-2">
                  <input type="text" class="w-full px-2 py-1 border border-neutral-300 rounded" placeholder="数据">
                </td>
                <td class="border border-neutral-200 px-4 py-2">
                  <input type="text" class="w-full px-2 py-1 border border-neutral-300 rounded" placeholder="数据">
                </td>
                <td class="border border-neutral-200 px-4 py-2">
                  <input type="text" class="w-full px-2 py-1 border border-neutral-300 rounded" placeholder="数据">
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="p-6 border-t border-neutral-200 flex justify-end">
        <button id="cancel-manual-input" class="px-4 py-2 bg-neutral-200 text-neutral-700 rounded mr-2 hover:bg-neutral-300">
          取消
        </button>
        <button id="save-manual-input" class="px-4 py-2 bg-primary text-white rounded hover:bg-primary-dark">
          保存数据
        </button>
      </div>
    </div>
  </div>

  <script src="{{ url_for('static', filename='js/main.js') }}"></script>
  
  <!-- 手动输入数据相关脚本 -->
  <script>
    
    // 手动输入数据区域点击事件
    document.getElementById('manual-input-area').addEventListener('click', function() {
      document.getElementById('manual-input-modal').classList.remove('hidden');
    });
    
    // 关闭模态框
    document.getElementById('close-manual-input-modal').addEventListener('click', function() {
      document.getElementById('manual-input-modal').classList.add('hidden');
    });
    
    document.getElementById('cancel-manual-input').addEventListener('click', function() {
      document.getElementById('manual-input-modal').classList.add('hidden');
    });
    
    // 添加行
    document.getElementById('add-row-btn').addEventListener('click', function() {
      const table = document.getElementById('manual-input-table');
      const tbody = table.querySelector('tbody');
      const rowCount = tbody.rows.length;
      const columnCount = tbody.rows[0].cells.length - 1; // 减去序号列
      
      const newRow = document.createElement('tr');
      
      // 添加序号列
      const indexCell = document.createElement('td');
      indexCell.className = 'border border-neutral-200 px-4 py-2 text-center';
      indexCell.textContent = rowCount + 1;
      newRow.appendChild(indexCell);
      
      // 添加数据列
      for (let i = 0; i < columnCount; i++) {
        const cell = document.createElement('td');
        cell.className = 'border border-neutral-200 px-4 py-2';
        
        const input = document.createElement('input');
        input.type = 'text';
        input.className = 'w-full px-2 py-1 border border-neutral-300 rounded';
        input.placeholder = '数据';
        
        cell.appendChild(input);
        newRow.appendChild(cell);
      }
      
      tbody.appendChild(newRow);
    });
    
    // 添加列
    document.getElementById('add-column-btn').addEventListener('click', function() {
      const table = document.getElementById('manual-input-table');
      const thead = table.querySelector('thead');
      const tbody = table.querySelector('tbody');
      
      // 添加表头列
      const headerCell = document.createElement('th');
      headerCell.className = 'border border-neutral-200 px-4 py-2 bg-neutral-50';
      
      const headerInput = document.createElement('input');
      headerInput.type = 'text';
      headerInput.className = 'w-full px-2 py-1 border border-neutral-300 rounded';
      headerInput.placeholder = '列名';
      headerInput.value = `列名${thead.rows[0].cells.length}`;
      
      headerCell.appendChild(headerInput);
      thead.rows[0].appendChild(headerCell);
      
      // 为每一行添加新列
      for (let i = 0; i < tbody.rows.length; i++) {
        const cell = document.createElement('td');
        cell.className = 'border border-neutral-200 px-4 py-2';
        
        const input = document.createElement('input');
        input.type = 'text';
        input.className = 'w-full px-2 py-1 border border-neutral-300 rounded';
        input.placeholder = '数据';
        
        cell.appendChild(input);
        tbody.rows[i].appendChild(cell);
      }
    });
    
    // 删除行
    document.getElementById('delete-row-btn').addEventListener('click', function() {
      const table = document.getElementById('manual-input-table');
      const tbody = table.querySelector('tbody');
      
      if (tbody.rows.length > 1) {
        tbody.deleteRow(tbody.rows.length - 1);
      } else {
        showNotification('表格至少需要保留一行', 'warning');
      }
    });
    
    // 删除列
    document.getElementById('delete-column-btn').addEventListener('click', function() {
      const table = document.getElementById('manual-input-table');
      const thead = table.querySelector('thead');
      const tbody = table.querySelector('tbody');
      
      const columnCount = thead.rows[0].cells.length;
      
      if (columnCount > 2) { // 保留序号列和至少一个数据列
        // 删除表头列
        thead.rows[0].deleteCell(columnCount - 1);
        
        // 删除每一行的对应列
        for (let i = 0; i < tbody.rows.length; i++) {
          tbody.rows[i].deleteCell(columnCount - 1);
        }
      } else {
        showNotification('表格至少需要保留一列', 'warning');
      }
    });
    
    // 保存手动输入的数据
    document.getElementById('save-manual-input').addEventListener('click', function() {
      const scenarioId = getCurrentScenarioId();
      if (!scenarioId) {
        showNotification('无法获取当前场景ID', 'error');
        return;
      }
      
      const table = document.getElementById('manual-input-table');
      const thead = table.querySelector('thead');
      const tbody = table.querySelector('tbody');
      
      // 获取列名
      const headers = [];
      for (let i = 1; i < thead.rows[0].cells.length; i++) { // 跳过序号列
        const input = thead.rows[0].cells[i].querySelector('input');
        headers.push(input.value || `列${i}`);
      }
      
      // 获取数据
      const data = [];
      for (let i = 0; i < tbody.rows.length; i++) {
        const row = {};
        for (let j = 1; j < tbody.rows[i].cells.length; j++) { // 跳过序号列
          const input = tbody.rows[i].cells[j].querySelector('input');
          row[headers[j-1]] = input.value;
        }
        data.push(row);
      }
      
      // 发送数据到服务器
      fetch(`/scenarios/${scenarioId}/manual-input`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ data: data })
      })
      .then(response => {
        if (!response.ok) {
          throw new Error('保存数据失败');
        }
        return response.json();
      })
      .then(result => {
        showNotification(result.message, 'success');
        document.getElementById('manual-input-modal').classList.add('hidden');
        
        // 刷新数据导入列表
        if (typeof loadScenarioImports === 'function') {
          loadScenarioImports(scenarioId);
        }
      })
      .catch(error => {
        showNotification('保存数据失败: ' + error.message, 'error');
        console.error('Error:', error);
      });
    });
  </script>
</body>
</html>
    